<template>
	<view class="container">
		<custom-navbar title="我的"></custom-navbar>
		
		<view class="main-content" :style="{paddingTop: navbarTotalHeight + 'px'}">
			<!-- 登录提示条 -->
			<view class="login-prompt" v-if="!isLoggedIn">
				<text class="prompt-text">登录懒人资源，体验更多在线资源服务</text>
				<view class="login-btn" @tap="goToLogin">
					<text class="btn-text">立即登录</text>
				</view>
			</view>
			
			<!-- 用户信息 -->
			<view class="user-info" v-if="isLoggedIn && userInfo">
				<image class="avatar" :src="userInfo.avatarUrl || 'https://img.icons8.com/fluency/48/user.png'" mode="aspectFit"></image>
				<view class="user-details">
					<text class="username">{{ userInfo.nickName || '用户昵称' }}</text>
					<text class="user-phone" v-if="userInfo.phone">{{ userInfo.phone }}</text>
					<text class="login-type">
						{{ userInfo.loginType === 'wechat' ? '微信登录' : userInfo.loginType === 'phone' ? '手机登录' : '其他方式登录' }}
					</text>
				</view>
			</view>
			
			<!-- 功能菜单 -->
			<view class="menu-list">
				<view class="menu-item" v-for="(item, index) in menuItems" :key="index" @tap="navigateToPage(item)">
					<image class="menu-icon" :src="item.icon" mode="aspectFit"></image>
					<text class="menu-text">{{item.name}}</text>
					<image class="arrow-icon" src="https://img.icons8.com/ios/50/forward.png" mode="aspectFit"></image>
				</view>
			</view>
			
			<!-- 退出登录按钮 -->
			<view class="logout-btn" @tap="logout" v-if="isLoggedIn">
				<text class="logout-text">退出登录</text>
			</view>
		</view>

		<!-- 自定义底部导航栏 -->
		<custom-tabbar :current="4" @switch="onTabSwitch"></custom-tabbar>
	</view>
</template>

<script>
import CustomNavbar from '@/components/custom-navbar/custom-navbar.vue';
import CustomTabbar from '@/components/custom-tabbar/custom-tabbar.vue';

export default {
	components: {
		CustomNavbar,
		CustomTabbar
	},
	data() {
		return {
			navbarTotalHeight: 132,
			statusBarHeight: 44,
			isLoggedIn: false, // 将在mounted中检查实际登录状态
			userInfo: null, // 用户信息
			menuItems: [
								{ name: '书签中心', icon: 'https://img.icons8.com/fluency/48/bookmark.png', url: '/pages/bookmarks/bookmarks' },
				{ name: '我的收藏', icon: 'https://img.icons8.com/fluency/48/like.png', url: '/pages/favorites/favorites' },
				{ name: '我的关注', icon: 'https://img.icons8.com/fluency/48/follow.png', url: '/pages/following/following' },
				{ name: '我的帖子', icon: 'https://img.icons8.com/fluency/48/post.png', url: '/pages/my-posts/my-posts' },
				{ name: '观看历史', icon: 'https://img.icons8.com/fluency/48/clock.png', url: '/pages/watch-history/watch-history' },
				{ name: '设置中心', icon: 'https://img.icons8.com/fluency/48/settings.png', url: '/pages/settings/settings' },
				{ name: '意见反馈', icon: 'https://img.icons8.com/fluency/48/feedback.png', url: '/pages/feedback/feedback' },
				{ name: '关于我们', icon: 'https://img.icons8.com/fluency/48/info.png', url: '/pages/about/about' },
			]
		}
	},
	mounted() {
		const systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight || 44;
		this.navbarTotalHeight = this.statusBarHeight + 44;
		
		// 检查用户登录状态
		this.checkLoginStatus();
	},
		onShow() {
		// 页面显示时重新检查登录状态，以防用户在其他页面登录后返回
		console.log('页面显示，重新检查登录状态');
		this.checkLoginStatus();
	},
	methods: {
		// 检查登录状态
		checkLoginStatus() {
			try {
				const token = uni.getStorageSync('token');
				const userInfo = uni.getStorageSync('userInfo');
				
				console.log('检查登录状态 - token:', token);
				console.log('检查登录状态 - userInfo:', userInfo);
				
				if (token && userInfo) {
					this.isLoggedIn = true;
					this.userInfo = userInfo;
					console.log('用户已登录，设置 isLoggedIn 为 true');
				} else {
					this.isLoggedIn = false;
					this.userInfo = null;
					console.log('用户未登录，设置 isLoggedIn 为 false');
				}
				
				// 强制更新视图
				this.$forceUpdate();
				
			} catch (e) {
				console.error('检查登录状态失败：', e);
				this.isLoggedIn = false;
				this.userInfo = null;
			}
		},
		
		// 跳转到登录页面
		goToLogin() {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		},
		//退出登录
		logout(){
			uni.showModal({
				title: '提示',
				content: '确定退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						// 执行退出登录操作
						uni.removeStorageSync('token');
						uni.removeStorageSync('userInfo');
						uni.removeStorageSync('isLoggedIn');
						// 更新登录状态
						this.isLoggedIn = false;
						this.userInfo = null;
						uni.showToast({
							title: '退出登录成功',
							icon: 'success'
						});
						// 刷新页面
						uni.reLaunch({
							url: '/pages/index/index'
						});
					}
				}
			});
		},
		
		navigateToPage(item) {
			if (item.url) {
				uni.navigateTo({
					url: item.url
				});
			} else {
				uni.showToast({
					title: `进入${item.name}`,
					icon: 'none'
				});
			}
		},
		
		onTabSwitch(event) {
			console.log('Tab切换:', event);
		}
	}
}
</script>

<style>
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
}

.main-content {
	padding: 20rpx;
}

/* 登录提示条 */
.login-prompt {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 50rpx;
	padding: 20rpx 30rpx;
	margin: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.prompt-text {
	color: #ffffff;
	font-size: 28rpx;
	flex: 1;
}

.login-btn {
	background: rgba(255,255,255,0.2);
	border-radius: 30rpx;
	padding: 12rpx 24rpx;
}

.btn-text {
	color: #ffffff;
	font-size: 24rpx;
}

/* 用户信息 */
.user-info {
	background: #ffffff;
	padding: 40rpx;
	margin: 20rpx;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 40rpx;
	margin-right: 30rpx;
}

.user-details {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.username {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 8rpx;
}

.user-phone {
	font-size: 26rpx;
	color: #666;
	margin-bottom: 8rpx;
}

.login-type {
	font-size: 24rpx;
	color: #999;
	background: #f0f0f0;
	padding: 4rpx 12rpx;
	border-radius: 12rpx;
	align-self: flex-start;
}

/* 功能菜单 */
.menu-list {
	background: #ffffff;
	margin: 20rpx;
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.menu-item {
	display: flex;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.menu-item:last-child {
	border-bottom: none;
}

.menu-icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 30rpx;
}

.menu-text {
	flex: 1;
	font-size: 30rpx;
	color: #333;
}

.arrow-icon {
	width: 20rpx;
	height: 20rpx;
	opacity: 0.5;
}

/* 退出登录按钮 */
.logout-btn {
	background: #ff4444;
	text-align: center;
	width: 90%;
	margin: 40rpx auto;
	padding: 28rpx 0;
	border-radius: 40rpx;
	box-shadow: 0 4rpx 20rpx rgba(255, 68, 68, 0.3);
}

.logout-text {
	color: #ffffff;
	font-size: 30rpx;
	font-weight: 500;
}
</style>